html
  .theme-wrap
    background transparent
.theme-scroll
  height 100%

.theme-item
  padding 26px 0 30px

.theme-header
  position relative
  display flex
  margin 0 16px
  align-items center
  padding 17px 10px
  background rgba(255, 255, 255, 0.9)
  border-radius 21px
  box-shadow: 0px 8px 20px rgba(101, 101, 101, 0.14);

.theme-cover
  display block
  width 140px
  height 140px
  border-radius 10px
  margin-left 20px

.theme-main
  flex 1

.share-title
  font-size 26px
  line-height 30px
  color #333
.share-title-slug
  font-size 20px
  line-height 30px
  color #666

.share-desc
  margin-top 6px
  font-size 14px
  line-height 20px
  color #687583

.theme-title
  margin 30px 16px 13px
  color #333
  font-size 20px
  line-height 1.4
  &:before
    content ''
    display inline-block
    vertical-align middle
    margin -3px 10px 0 0
    width 29px
    height 21px
    background url(https://image-hosting.xiaoxili.com/img/img/20200910/4f8d31eea9086dab780e395cd8776d93-e97f45.png) no-repeat
    background-size contain
.theme-wrap
  padding 1px 16px
  overflow hidden
.category-item
  float left
  width 100px
  margin-top 10px

  margin-right 18px

  &:nth-child(3n)
    margin-right: 0

  &:nth-child(6n+1)
    .shape-list
      background: #FFF3CE;
  &:nth-child(6n+2)
    .shape-list
      background: #ECFFCE;
  &:nth-child(6n+3)
    .shape-list
      background: #FFE5CE;
  &:nth-child(6n+4)
    .shape-list
      background: #CEDEFF;
  &:nth-child(6n+5)
    .shape-list
      background: #EAD2FF;
  &:nth-child(6n+6)
    .shape-list
      background: #FFD0EF;

.category-hd
  line-height 28px
  text-align center
  color #767676
  font-size 14px
  line-height 20px
  margin-top 5px

.category-image
  margin 0 10px 10px 20px
  display block
  width 28px
  height 28px
  box-shadow 0 0 2px rgba(157, 157, 157, 0.2)

.shape-list
  height 100px
  box-shadow 0px 0px 4px rgba(157, 157, 157, 0.5);
  border-radius: 7px

.shape-item
  float left
  display block
  width 40px
  height 40px
  padding 5px